<template>
	<view>
		<view class="bg-light flex">
			<!-- 左导航 -->
			<view class="flex flex-column mt-5" style="width: 24%;">
				<view @click="SelectActive(i,item.Category_SerialNumber)" v-for="(item,i) in pinzhongList" style="width: 150rpx;height: 100rpx;line-height: 100rpx;transition: all 0.5s;" :key="i" class="text-center p-1 bg-white" :class="(active==i?'bg-'+color+' '+'text-white':'')">
					<text>{{item.Category_Name}}</text>
				</view>
			</view>
			<!-- 右商品 -->
			<view class="flex-1">
				<view class="flex" style="justify-content: space-evenly;">
					<text :class="(active2==i?'text-'+color+' '+'border-bottom-'+color:'')" @click="SelectColor(i)" v-for="(item,i) in Sort" :key="i">{{item}}</text>
				</view>
				<view class="flex justify-center w-100 my-2">
					<uni-easyinput style="width: 80%;" class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="请输入商品关键字" @iconClick="iconClick"></uni-easyinput>
				</view>
				<Goods @limit="limit" :Article_Name="Article_Name" :sort="sort" :Category_SerialNumber="Category_SerialNumber" :width="width"></Goods>
			</view>
		</view>
		<uni-pagination :pageSize="4" @change="changePage" :total="total" title="标题文字" />
	</view>
</template>

<script>
	import Goods from '@/components/Goods/Goods.vue'
	const app = getApp()
	export default {
		data() {
			return {
				color: uni.getStorageSync('ThemeColors') ? uni.getStorageSync('ThemeColors') : 'green',
				active:0,
				active2:0,
				width:'280rpx',
				value:'',
				Category_SerialNumber:'',
				Article_Name:'',
				sort:0,
				total:0,
				page:0,
				pinzhongList: [{
					Category_SerialNumber: '',
					Category_Name: '全部'
				}],
				Sort:['默认排序','价格升序','价格降序']
			};
		},
		onLoad() {
			this.getCategoryData()
		},
		components:{
			Goods
		},
		methods:{
			getCategoryData() {
				uni.request({ //获取到所有类别
					url: app.globalData.Domain_Name + '/GoodsFileInquiry',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "POST",
					data: {
						Data: "category",
					},
					success: (res) => {
						this.pinzhongList.push(...res.data)
						console.log(this.pinzhongList)
					}
				})
			},
			SelectActive(i,Category_SerialNumber){
				this.active = i
				this.Category_SerialNumber = Category_SerialNumber
			},
			SelectColor(i){
				this.active2 = i
				this.sort = i
			},
			iconClick(e){
				this.Article_Name = this.value
			},
			changePage(e){
				this.page = e
			},
			limit(e){
				console.log(e)
				this.total = e
			}
		}
	}
</script>

<style lang="scss">
	.activeItem{
		background-color: #fc7c08;
		color: #ffffff;
	}
	.activeColor{
		color: #fc7c08;
		border-bottom: 4rpx solid #fc7c08;
	}
</style>
